<script>
import addtable from '@/mixins/addtable'
import AjaxStore from '@/utils/store/proxyAjax'

export default {
  name: 'role-manage',
  mixins: [addtable],
  data() {
    return {
      tableSelectionCol: false,
      tableOptWidth: '80',
      dialogType: '',
      idKey: 'id',
      delIdKey: 'id',

      projectIdSe: '',
      containerData: '',
      showInputFlag: true,
      inputPlaceholder: '输入类型名称搜索',

      addUrl: '/v1/yq/project/types/create',
      updateUrl: '/v1/yq/project/types/modify',
      delUrl: '/v1/yq/project/types/delete',
      url: '/v1/yq/project/types/findById',
      store: new AjaxStore({
        url: '/v1/yq/project/types/query'
      }),
      columns: [
        {
          prop: 'name',
          label: '类型名称',
          sortable: true,
          'min-width': '200',
          'header-align': 'center'
        },
        {
          prop: 'code',
          label: '类型编码',
          sortable: true,
          'min-width': '200',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'seq',
          label: '类型排序',
          sortable: true,
          'min-width': '60',
          'header-align': 'center',
          align: 'center'
        },
        {
          prop: 'description',
          label: '类型描述',
          sortable: true,
          'min-width': '240',
          'header-align': 'center'
        }
      ],
      searchFields: [],
      searchModel: {},
      searchBtnList: [],
      toolPanelBtnList: this.toolPanelBtns,
      tableRowBtnList: this.tableRowBtns,
      formPanel: {
        add: {
          model: {
            id: '',
            code: '（自动生成）',
            name: '',
            seq: undefined, // 是为了使得seq初始值显示为空，否则会显示为0
            description: ''
          },
          fields: [
            {
              label: '类型名称',
              prop: 'name',
              placeholder: '输入类型名称',
              anchor: 24
            },
            {
              label: '类型编码',
              prop: 'code',
              placeholder: '输入类型编码',
              anchor: 24
            },
            {
              label: '排序号',
              prop: 'seq',
              xType: 'number',
              precision: 0,
              controlsPosition: 'right',
              step: 1,
              placeholder: '输入排序号',
              anchor: 24
            },
            {
              label: '描述',
              prop: 'description',
              placeholder: '输入描述',
              anchor: 24,
              type: 'textarea',
              rows: 4
            }
          ],
          rules: {
            name: [
              { required: true, message: '请输入类型名称', trigger: 'blur' }
            ],
            code: [
              { required: true, message: '请输入类型编码', trigger: 'blur' }
            ]
          },
          title: '新增类型',
          type: 'ADD',
          ref: 'addForm',
          submitBtnList: this.addBtns
        },
        edit: {
          model: {
            id: '',
            code: '',
            name: '',
            seq: undefined,
            description: ''
          },
          fields: [
            {
              label: '类型名称',
              prop: 'name',
              placeholder: '输入类型名称',
              anchor: 24
            },
            {
              label: '类型编码',
              prop: 'code',
              placeholder: '输入类型编码',
              anchor: 24
            },
            {
              label: '排序号',
              prop: 'seq',
              precision: 0,
              controlsPosition: 'right',
              step: 1,
              placeholder: '输入排序号',
              anchor: 24
            },
            {
              label: '描述',
              prop: 'description',
              placeholder: '输入描述',
              anchor: 24,
              type: 'textarea',
              rows: 4
            }
          ],
          rules: {
            name: [
              { required: true, message: '请输入类型名称', trigger: 'blur' }
            ],
            code: [
              { required: true, message: '请输入类型编码', trigger: 'blur' }
            ]
          },
          title: '编辑类型',
          type: 'EDIT',
          ref: 'editForm',
          submitBtnList: this.editBtns
        }
      }
    }
  },
  methods: {
    handleEditSubmit() {
      return this.$refs.editForm
        .validate()
        .then(() => {
          return this.update(this.formPanel.edit.model)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.table.load()
            this.dialogType = ''
          } else {
            throw new Error(message)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    handleInputClick(ev, val) {
      const params = {}
      params.name = val
      this.store._searchParams = params
      this.$refs.table.load(1, this.store.limit)
    },
    handleCurrentChange() {}
  },
  beforeCreate() {
    const urlArr = ((this.$route.meta && this.$route.meta.children) || []).map(
      item => item.url
    )

    // 弹窗新增保存
    this.addBtns = [
      {
        label: '保存',
        methods: 'handleAddSubmit',
        url: '/v1/yq/project/types/create',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    // 弹窗修改保存
    this.editBtns = [
      {
        label: '保存',
        methods: 'handleEditSubmit',
        url: '/v1/yq/project/types/modify',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    // 新增按钮
    this.toolPanelBtns = [
      {
        label: '新增',
        methods: 'handleAdd',
        url: '/v1/yq/project/types/create',
        icon: 'el-icon-circle-plus-outline',
        type: 'primary',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    // 列表里面按钮
    this.tableRowBtns = [
      {
        label: '编辑',
        methods: 'handleEdit',
        url: '/v1/yq/project/types/modify',
        icon: 'el-icon-edit-outline',
        type: 'primary',
        key: 'edit',
        align: 'top-start',
        disabled: false
      },
      {
        label: '删除',
        methods: 'handleDelete',
        url: '/v1/yq/project/types/delete',
        icon: 'el-icon-delete',
        type: 'danger',
        key: 'delete',
        align: 'top-start',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)
  }
}
</script>

<style lang="scss">
.role-manage {
  .searchPanel {
    display: none;
  }
  .toolPanel {
    .search-input {
      float: right;
      width: 80%;
    }
  }
}
.roleAuthorLoading {
  background: #000;
  opacity: 0.5;
}
.role-authorize-dialog {
  box-sizing: border-box;
  .el-dialog__body {
    height: 500px;
  }
}
</style>
